import React, {Component} from 'react';
import { connect } from 'react-redux';
import { Button, Modal } from 'antd';
import backGroundImg from 'images/home/background.jpg';
import PersonalSettingForm from 'containers/personal-setting/personal-setting-form';
import NewProtocolModal from 'components/template/new-user-protocol/new-user-protocol';
import StopAnnonuce from 'components/template/stop-annonuce/stop-annonuce';
import ResetPassword from "components/template/reset-password/reset-password";
import {messages} from 'share/common';
import mainInitModalManageService from './main-init-modal-manage.service'
import FullScreen from 'components/full-screen';
import UnboxSetting from 'containers/unbox-setting/unbox-setting';
import menuRoute from 'routes/menuRoute';
import CommonStatus from 'containers/unbox-setting/common-status/common-status';

class MainInitModalManage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedStart: false, //是否点击了开始引导
      showBindModal: false, //绑定手机号模态框 显隐控制
      hasInitRoleConfig: false, //是否配置完成了 初始化角色
      showUnboxSetting: false, //是否展示 快捷设置中心
      resetPassword: false,//重置密码弹窗
      isShowNewProtocol: false, //是否显示 隐私协议
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
    const { onRef } = this.props;
    onRef && (onRef(this));
  }

  componentWillUnmount() {

  }

  goToUnboxSetting = (key) => {
    this.setState({showUnboxSetting: false}, ()=>{
      mainInitModalManageService.setGuided();
      this.context.router.push({
        pathname: menuRoute.getRouteItem('unbox-setting').url,
        state: {menuKey: key}
      })
    });
  }

  //下面的 function 是 一级一级 往下的

  //1.判断拿到公告没
  handleGotAnnounce = (haveAnnounce, isRemind) => {
    if (haveAnnounce) {
      if (isRemind) {
        this.handleIsShowResetPassWord()
      }
    } else {
      this.handleIsShowResetPassWord()
    }
  }

  //2.看用户是否需要重置密码
  handleIsShowResetPassWord = () => {
    const { user, isDingTalkEnv } = this.props;
    if (user.resetPassword && !isDingTalkEnv) {
      this.setState({resetPassword: true})
    } else {
      this.checkMobileStatus()
    }
  }
  //2.密码重置后
  resetPasswordFinished = () => {
    this.checkMobileStatus()
  }

  //3.校验用户是否绑定了手机号
  checkMobileStatus = () => {
    const {loginUser} = this.props;
    if (loginUser && loginUser.loginMobileCheck && !loginUser.mobile)
      this.setState({showBindModal: true});
    else
      this.handleIsShowNewProtocol();
  };

  //4.判断是否需要给用户展示 隐私协议
  handleIsShowNewProtocol = () => {
    const { user } = this.props;
    if (user.resetPassword) {
      this.setState({isShowNewProtocol: true})
    } else {
      this.handleIsShowGuideModal()
    }
  }
  //4.隐私协议阅读完成
  handleNewProtocolReadFinished = () => {
    this.handleIsShowGuideModal()
  }

  //5.判断用户是否有经过 引导
  handleIsShowGuideModal = () => {
    const { user, menuTree } = this.props;
    if (!user.pcGuided && (menuTree.allAPIMenuItem["home"])) {
      this.setState({showUnboxSetting: true})
    }
  }

  handleCloseModal = () => {
    this.setState({showUnboxSetting: false},()=>{
      mainInitModalManageService.setGuided();
      this.props.showNewUnboxTip && this.props.showNewUnboxTip();
    })
  }

  render() {
    const { showBindModal, showUnboxSetting, resetPassword, isShowNewProtocol } = this.state;
    const { user, isDingTalkEnv } = this.props;
    const { code } = this.props.language;
    return (
      <div>
        {/*以下优先级 来自 需求： 11445  */}

        {/*停机公告，优先级：【1】*/}
        <StopAnnonuce gotAnnounce={(haveAnnounce, isRemind)=>{this.handleGotAnnounce(haveAnnounce, isRemind)}}/>

        {/*重置密码，优先级：【2】*/}
        {resetPassword && !isDingTalkEnv && <ResetPassword onFinished={this.resetPasswordFinished}/>}

        {/*绑定手机号模态框，优先级：【3】*/}
        {<PersonalSettingForm visible={showBindModal}
                              modalType={'BIND_MOBILE'}
                              forceBind={true}
                              onCancel={() => {
                              }}
                              title={messages('common-1.key398')/*设置手机号*/}
                              onOk={() => {
                                this.setState({showBindModal: false});
                                this.handleIsShowNewProtocol()
                              }}/>}

        {/*新用户进入提示协议（隐私协议），优先级：【4】*/}
        {<NewProtocolModal onReadFinished={this.handleNewProtocolReadFinished} resetPassword={user.resetPassword && isShowNewProtocol}/>}

        {/*欢迎消息模态框  11445 不要了*/}
        {/*{!user.resetPassword && <WelcomeMessagesModal/>}*/}

        {/*设置中心（superAdmin 或 有管理员首页   的 权限 显示），优先级：【5】*/}
        {/*欢迎引导页面模态框*/}
        <Modal
          className={`ant-new-welcome-modal ${['zh_cn', 'zh_tw'].indexOf(code) !== -1 ? '' : 'en'}`}
          width={['zh_cn', 'zh_tw'].indexOf(code) !== -1 ? 600 : 690}
          visible={showUnboxSetting}
          footer={null}
          maskClosable={false}
          onCancel={()=>{this.handleCloseModal()}}
        >
          <div className="new-welcome-modal">
            <div className="content">
              <div className="main-title">{messages('common-1.key399')/*Hi~欢迎使用汇联易*/}</div>
              <div className="text">
                <div>{messages('common-1.key400',{arg1: user.fullName})/*用户{arg1}，你好！*/}</div>
                <div>{messages('common-1.key401')/*为了帮助你更快速的了解及使用系统，请前往快捷设置中心完成设置*/}</div>
              </div>
              <div className="step-2">
                <div className="guide-wrapper">
                  <CommonStatus firstMode goToUnboxSetting={(isAdvance)=>{this.goToUnboxSetting(isAdvance)}} />
                </div>
                <Button type='primary' className={`start-btn`} onClick={()=>{this.goToUnboxSetting(false)}} >
                  {messages('common-1.key402')/*立即前往*/}
                </Button>
              </div>
            </div>
            <img onMouseDown={e=>e.preventDefault()} src={backGroundImg} className='background-image'/>
          </div>
        </Modal>


        {/*/!*蒙层引导*!/*/}
        {/*{showMaskGuide && <MaskGuide onResize={this.handleMaskResize} onClose={this.onMaskGuideClose}/>}*/}


      </div>
    );
  }
}

MainInitModalManage.contextTypes = {
  router: React.PropTypes.object
}

MainInitModalManage.propTypes = {};

function mapStateToProps (state) {
  return {
    language: state.main.language,
    user: state.login.user,
    loginUser: state.login.loginUser,
    isDingTalkEnv: state.main.isDingTalkEnv,
    menuTree: state.login.menuTree,
  };
}

export default connect(mapStateToProps)(MainInitModalManage);
